<template>
	<view class="daiban">
		<view class="top-bg syspadding">
			<view class="acea-row px30 mt-20">
				<text class="title bold">待办</text>
				<text class="subtitle">请及时办理相关业务并确认办结情况</text>
			</view>
			<view class="tips-nav ">
				<image src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/d3831dff89c9074c6821ad673b9eb17f.png" mode="aspectFit"></image>
 				<text>温馨提示: 目前待办功能仅提供部分待办事项的服务，我们将持续升级，为您提供更全面的待办提醒。</text>
			</view>
		</view>
		<view class="cate-nav acea-row row-middle">
			<view class="item bold acea-row row-column row-center row-middle" :class="cate==2?'weijie':''" @click="cateClick(1)">
				<view :class="cate==1?'on':''">未办结	</view>
			</view>
			<view class="item bold acea-row row-column row-center row-middle" :class="cate==1?'yijie':''" @click="cateClick(2)">
				<view :class="cate==2?'on':''">已办结	</view>
			</view>
			<view class="bot" :class="cate==1?'bot-left':'bot-right'"></view>
		</view>
		
		<view class="none-jie acea-row row-middle row-center row-column" v-if="cate==1">
			<image src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/da0951dc7646d4a9b5e9a1c78e5d287f.png" mode="aspectFit"></image>
			<text class="">暂无未办结事项</text>
		</view>
		
		<view class="none-jie acea-row row-middle row-center row-column" v-if="cate==2">
			<image src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/da0951dc7646d4a9b5e9a1c78e5d287f.png" mode="aspectFit"></image>
			<text class="">暂无已办结事项</text>
		</view>
		
		
		<tabbar :url="'/pages/index/daiban'"></tabbar>
	</view>
</template>

<script>
	import tabbar from '../../components/tabbar.vue'
	export default {
		components:{
			tabbar
		},
		data() {
			return {
				cate:1,
				
			};
		},
		onShow() {
			uni.hideTabBar()
		},
		methods:{
			cateClick(val){
				this.cate = val;
			}
		}
	}
</script>

<style lang="scss">
	page{ background-color: #F5F6FA !important; }
	.daiban{
		
		.top-bg{
			width: 100%;
			height: 300rpx;
			background-image: url('http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/f38de4a19d646412fa80a991083a132a.png');
			background-size: 100% 100%;
			box-shadow: 0 30rpx 30rpx #F5F6FA;
			
			.title{
				font-size: 44rpx;
				color: #ffffff;
				letter-spacing: 4rpx;
			}
			.subtitle{
				margin-left: 30rpx;
				color: #ffffff;
				font-size: 26rpx;
				opacity: 0.5;
				letter-spacing: 4rpx;
				margin-top: 20rpx;
			}
			.tips-nav{
				width: 690rpx;
				height: 100rpx;
				margin: 30rpx auto;
				background-image: url('http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/a94ca79acea4a7f20a974ed7a7e12369.png');
				background-size: 100% 100%;
				padding: 20rpx 30rpx;
				font-size: 26rpx;
				color: #D79B4E;
				line-height: 30rpx;
				letter-spacing:2rpx;
				
				image{
					width: 25rpx;
					height: 25rpx;
					margin-top: 5rpx;
					margin-right: 10rpx;
				}
			}
		}
		
		.cate-nav{
			width: 100%;
			height: 100rpx;
			background-color: #F5F6FA;
			margin: 0 auto;
			position: relative;
			
			.item{
				flex: 1;
				height: 100rpx;
				color: #7C7F8A;
				font-size: 30rpx;
				padding-top: 30rpx;
			}
			.on{
				color: #202124;
			}
			.weijie{
				background-image: url('http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/0c2497b1279437d4d0454dedb8daa619.png');
				background-size: 100% 100%;
				width: 55%;
				height: 100rpx;
				color: #7C7F8A;
				font-size: 30rpx;
			}
			.yijie{
				background-image: url('http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/a524833f8720fc733d946aa27e0a7e65.png');
				background-size: 100% 100%;
				width: 55%;
				height: 100rpx;
				color: #7C7F8A;
				font-size: 30rpx;
			}
			.bot{
				width: 60rpx;
				height: 8rpx;
				background-color: #5179F5;
				border-radius: 10rpx;
				position: absolute;
				bottom: -10rpx;
				transition: all 0.3s linear;
			}
			.bot-left{
				left: 160rpx;
			}
			.bot-right{
				left: 530rpx;
			}
			
		}
		
		.none-jie{
			color: #1D1D20;
			font-size: 30rpx;
			margin-top: 250rpx;
			letter-spacing: 3rpx;
			
			image{
				width: 100%;
				height: 300rpx;
				margin-bottom: 30rpx;
			}
		}
	}
</style>
